<template>
  <div class="pay">
    <p class="title">支付方式</p>
    <div class="type">
      <span class="_label"> 开启月付</span>
      <el-radio-group v-model="payData.monthlyFlag" @change="onPayChange">
        <el-radio label="YES">是</el-radio>
        <el-radio label="NO">否</el-radio>
      </el-radio-group>
    </div>

    <div class="store" v-if="ori === 'customerDetail' && payData.monthlyFlag === 'YES'">
      <span class="_label"> 可月付店铺</span>
      <div class="store_oper">
        <Button label="修改" type="primary" @click="onEditClick" />
      </div>
    </div>
  </div>

  <Monthly v-model:visible="monthlyVisible" :list="payData.list" @complete="onSelectSupplierIdsComplete" />
</template>

<script setup>
import { reactive, ref, watch, onMounted } from 'vue'
import { ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
import Monthly from './monthly.vue'
import Button from '@/components/button/button.vue'

const props = defineProps(['ori', 'monthlyFlag', 'list'])
const emit = defineEmits(['change', 'complete'])

watch(
  () => props.monthlyFlag,
  (val) => {
    if (val) {
      payData.monthlyFlag = val
    }
  }
)

watch(
  () => props.list,
  (val) => {
    if (val) {
      payData.list = val
    }
  }
)

const router = useRouter()
const monthlyVisible = ref(false)
const messageTitle = ref('')

const payData = reactive({
  monthlyFlag: '',
  list: []
})

const onEditClick = () => {
  monthlyVisible.value = true
}

const onSelectSupplierIdsComplete = (val) => {
  emit('complete', { monthlyFlag: payData.monthlyFlag, supplierIds: val })
}

const onPayChange = (val) => {
  val === 'YES' ? (messageTitle.value = '是否开启月付') : (messageTitle.value = '是否关闭月付')

  ElMessageBox.confirm(`${messageTitle.value}`, '系统', {
    type: 'warning',
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    showClose: false,
    closeOnClickModal: false,
    closeOnPressEscape: false
  })
    .then(() => {
      emit('change', val)
    })
    .catch(() => {
      payData.monthlyFlag = props.monthlyFlag
    })
}
</script>
<style scoped lang="scss">
.pay {
  padding: 20px 0 20px 20px;
  background-color: #fff;
  margin-top: 10px;

  .title {
    line-height: 20px;
    font-size: 16px;
    font-weight: 500;
  }

  ._label {
    display: inline-block;
    width: 70px;
    height: 20px;
    line-height: 20px;
    margin-right: 20px;
  }

  .type {
    margin-top: 20px;
    color: var(--color-text);
  }

  .store {
    display: flex;
    align-items: center;
    margin-top: 20px;
  }
}
</style>
